import React, { Component } from "react";
import styles from "./Home.module.scss";
import SearchInput from "../searchInput/SearchIput";
import {
  getHomeSwiperList,
  getHomeCartItems,
  getHomePicList,
} from "../../data/api";
import { withRouter } from "react-router-dom";
// 1.引入轮播图组件
import { Carousel } from "antd-mobile";
class Home extends Component {
  state = {
    swiperList: [], //首页轮播图的数据
    catItems: [], //首页导航照片数据
    picList: [], //图片列表
  };
  // 从轮播图跳转到商品详情页
  goToDetail = (goods_id) => {
    // console.log(11);
    this.props.history.push("goodDetail/" + goods_id);
  };
  // 跳转到分类页面
  goToCategory = (params) => {
    this.props.history.push("category");
  };
  //跳转到产品列表
  goToProductList=(params) => {
    console.log(11);
    this.props.history.push("goodlist")
  }
  async componentDidMount() {
    let swiperList = await getHomeSwiperList();
    let catItems = await getHomeCartItems();
    let picList = await getHomePicList();
    this.setState((preState) => {
      // console.log(picList.message);
      return {
        swiperList: swiperList.message,
        catItems: catItems.message,
        picList: picList.message,
      };
    });
  }
  render() {
    return (
      <div className={styles.ykHome}>
        {/* 首页标题的开始 */}
        <div className={styles.ykHomeTitle}>
          <span className={styles.title}>优酷商城</span>
        </div>
        {/* 首页标题结束 */}
        {/* 首页搜索框开始 */}
        <SearchInput></SearchInput>
        {/* 首页搜索框结束 */}
        {/* 首页轮播图组件开始 */}
        <div className="ykHomeSwiper">
          <Carousel autoplay={false} infinite>
            {this.state.swiperList.map((val) => (
              <img
                onClick={this.goToDetail.bind(this, val.goods_id)}
                key={val.goods_id}
                src={val.image_src}
                alt=""
                style={{ width: "100%", verticalAlign: "top" }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event("resize"));
                  this.setState({ imgHeight: "auto" });
                }}
              />
            ))}
          </Carousel>
        </div>
        {/* 首页轮播图组件结束 */}
        {/* 首页分类图标开始 */}
        <div className={styles.ykHomeCat}>
          {this.state.catItems.map((v, i) => {
            return (
              <div
                onClick={this.goToCategory}
                className={styles.homeCatItem}
                key={v.image_src}
              >
                <img src={v.image_src} alt="" />
              </div>
            );
          })}
        </div>
        {/* 首页分类图标结束 */}
        {/* 首页照片列表的开始 */}
        <div className={styles.ykHomeList}>
          {this.state.picList.map((v, i) => {
            return (
              <div className={styles.homeListItem} key={v.floor_title.image_src}>
                {/* 标题的开始 */}
                <div className={styles.listItemTitle}>
                  <img src={v.floor_title.image_src} key={v.image_src} alt="" />
                </div>
                {/* 标题的结束 */}
                {/* 图片列表的开始 */}           
                <div className={styles.listItemPics}>
                  {
                    v.product_list.map((vv,i)=>{
                      return <div className={styles.picItem} key={vv.image_src}
                      onClick={this.goToProductList}
                      >
                        <img src={vv.image_src} alt=""/>
                      </div>
                    })
                  }
                </div>
                {/* 图片列表的结束 */}
              </div>
            );
          })}
        </div>
        {/* 首页照片列表的结束 */}
      </div>
    );
  }
}
export default withRouter(Home);
